<template>
  <div v-loading="loading">
    <el-table v-if="list"
              :data="list"
              :stripe="truee"
              style="width: 100%">
      <el-table-column
          label="序号"
          header-align="center"
          align="center"
          type="index"
      >
      </el-table-column>

      <el-table-column
          header-align="center"
          align="center"
          prop="articlename"
          label="文章名"
      >
      </el-table-column>

      <el-table-column
          header-align="center"
          align="center"
          prop="creatdate"
          label="创建时间"
      >
      </el-table-column>

      <el-table-column
          header-align="center"
          align="center"
          prop="firsttype"
          label="文章类型"
      >
      </el-table-column>

      <el-table-column
          header-align="center"
          align="center"
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row.articleid)">修改
          </el-button>
          <el-button
              size="mini"
              @click="delArticle(scope.row.articleid)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:30px"></div>
    <el-pagination v-if="list"
                   background
                   layout="prev, pager, next"
                   :page-size="pageset.pageSize"
                   :page-count="pageset.pages"
                   :current-page="pageset.pageNum"
                   @current-change="change"
    >
    </el-pagination>
  </div>
</template>
<script>
import { MessageBox } from 'element-ui';
export default {
  name: 'ARticleList',
  data() {
    return {
      list: [],
      value: true,
      loading: true,
      page: 1,
      current_page: 1,
      last_page: 1,
      truee: true,
      pageset: {
        pageNum: 1,
        pageSize: 5,
        pages: 0
      }
    }
  },
  methods: {
    delArticle(articleid) {
      MessageBox('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("/article/delArticle/" + articleid).then(async res => {
          if (res.code == 200) {
            await this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getArticleList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    change(page) {
      this.pageset.pageNum = page
      this.getArticleList()
    },
    handleEdit(id) {
      this.$router.push({path: '/home/articles/update/' + id})
    },
    getArticleList() {
      this.$http.post("/article/pageGetAllArticle", this.pageset).then(res => {
        if (res.code == 200) {
          this.list = res.data.list
          this.pageset.pages = res.data.pages
          this.loading = false
        }
      })
    }
  },
  created() {
    this.getArticleList()
  }
}
</script>
<style lang="stylus" scoped>

</style>